<script setup lang='ts'>
  import { watch, ref } from 'vue';
  import cattleList from './cattleList.vue';
  import recordList from './recordList.vue';
  import { controlStore } from "@/pinia/modules/controller";
  const useControlStore = controlStore();
  import { getAssetsFile } from '@/utils/public'
  import { playState,cattleArr1, cattleArr2, round, hastenSet } from '@/pinia/getter'
  import nextSvga from '@/components/nextSvga.vue';
  const nextSvgaRef = ref()
  // const handlePlay = ()=>{
  //   if(!playState.value) {
  //     useControlStore.getPlayState(true)
  //   } else {
  //     useControlStore.outcome = 2
  //     useControlStore.hastenSet = false
  //     useControlStore.getPlayState(false)
  //   }
  // }
  watch(hastenSet,()=>{
    if(hastenSet.value) {
      nextSvgaRef.value.startAnimation()
    }else {
      nextSvgaRef.value.pauseAnimation()
    }
  })
</script>

<template>
  <div class="headBox">
    <div class="cattleBox">
    <nextSvga
      ref="nextSvgaRef"
      class="nextSvga"
      :loops="0"
      svgaUrl="cord.svga"
    />
      <img
      :src="getAssetsFile('textImg6.png')"
      :class="[
        'textImg',
        round >= 20 && round <= 22?'showTextImg':'',
        round == 21?'textMove1':'',
        round == 22?'textMove2':'',
      ]"
      >
      <cattleList
        class="cattleList1"
        type="1"
        :cattleArr="cattleArr1"
        :style="{
          '---playTime':hastenSet?'2s':'4s',
        }"
      />
      <cattleList
        type="2"
        class="cattleList2"
        :cattleArr="cattleArr2"
        :style="{
          '---playTime':hastenSet?'2s':'4s',
        }"
      />
    </div>
    <recordList />
  </div>
</template>

<style lang='scss' scoped>
  .headBox {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 232px;
    min-height: 232px;
    background: url($href+'banner.png') left top / 100% 191px no-repeat;
    .cattleBox {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 100%;
      padding: 52px 0 0;
      box-sizing: border-box;
      .nextSvga {
        pointer-events: none;
        z-index: 2;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 358px;
      }
      .textImg {
        display: none;
        z-index: 10;
        position: absolute;
        top: 50px;
        left: -100%;
        transform: translateX(-100%);
        width: 180px;
        height: 79px;
      }
      .showTextImg {
        display: block;
        transition: left 1s, transform 1s;
      }
      .textMove1 {
        left: 50%;
        transform: translateX(-50%);
      }
      .textMove2 {
        left: 100%;
        transform: translateX(100%);
      }
    }
  }
</style>